<template>
  <!-- /评论 开始 -->
  <div class="mt50 mb50 commentHtml">
    <div>
      <h6 class="c-c-content c-infor-title" id="i-art-comment">
        <span class="commentTitle">课程评论</span>
      </h6>
      <section class="lh-bj-list pr mt20 replyhtml">
        <ul>
          <li class="unBr">
            <aside class="noter-pic">
              <img width="50" height="50" class="picImg" src="~/assets/img/avatar-boy.gif">
            </aside>
            <div class="of">
              <section class="n-reply-wrap">
                <fieldset>
                  <!--计算属性-->
                  <textarea name="" v-model="commentContent" placeholder="输入您要评论的文字"
                            id="commentContent"></textarea>
                </fieldset>
                <p class="of mt5 tar pl10 pr10">
                  <span class="fl "><tt class="c-red commentContentmeg" style="display: none;"></tt></span>
                  <input type="button" value="评论" class="lh-reply-btn" :disabled="commentBtnDis"
                         @click="addComment($enum.COM_TYPE.COM.value,0,0,0)">
                </p>
              </section>
            </div>
          </li>
        </ul>
      </section>
      <section class="">
        <section class="question-list lh-bj-list pr">
          <ul class="pr10">
            <li v-for="(comment,index) in dataInfo.items" v-bind:key="index">
              <aside class="noter-pic">
                <img width="50" height="50" class="picImg" :src="comment.fromAvatar">
              </aside>
              <!--昵称-->
              <div class="of">
                    <span class="fl">
                    <!--  判断当前登录的用户评论-->
                      <i class="fsize12 c-grey comment-nickname">
                      <span style="font-size: 15px;font-weight: 600"
                            :class="{'is-current-user':comment.fromMemberId==loginInfo.id}">{{comment.fromNickname}} :</span>
                    </i>
                    </span>

                <!--<span v-if="comment.isCurrent" style="float: right;font-size: 13px;"><i
                  class="el-icon-delete"></i></span>-->
              </div>

              <div class="noter-txt " style="margin: 5px 0 12px 0">
                <p>{{comment.content}}</p>
              </div>
              <!--日期-->
              <div class="of">
                <span class="fl"><font class="fsize12 c-999 ">{{comment.gmtCreate | timeDiff}}</font></span>
                <span class="fl" @click="doReply(comment.id)"><a class="fsize12 c-999 ml15">{{showItemId===comment.id?'取消回复':'回复'}}</a></span>
                <!--删除评论-->
                <span class="fr">
                  <font class="fsize12 c-999 ml15">
                    <el-dropdown @command="delComment">
                      <i class="el-icon-more"></i>
                       <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item v-if="comment.fromMemberId===loginInfo.id"
                                           :command="comment.id">删除评论</el-dropdown-item>
                         <div v-else>
                            <el-dropdown-item>举报</el-dropdown-item>
                            <el-dropdown-item>加入黑名单</el-dropdown-item>
                         </div>
                       </el-dropdown-menu>
                    </el-dropdown>
                      </font>
                </span>
                <div class="clear"></div>

                <!--******************回复评论输入******************-->
                <template v-if="showItemId===comment.id">
                  <div class="comment-reply-form-box">
                    <!--评论框-->
                    <div class="comment-reply-form">
                      <el-input
                        type="textarea"
                        :autosize="{ minRows: 3, maxRows: 5}"
                        :placeholder="'回复@'+comment.fromNickname"
                        v-model="replyCommentContent"
                      >
                      </el-input>

                      <div class="comment-operate-box">
                        <div class="comment-operate-l">
                          <span class="tip_comment">还能输入<em>{{1000-replyCommentContent.length}}</em>个字符</span>
                        </div>
                        <div class="comment-operate-c">
                          &nbsp;
                        </div>
                        <div class="comment-operate-r">
                          <input type="button" value="回复" :disabled="replyCommentBtnDis"
                                 class="lh-reply-btn  my-reply-btn "
                                 @click="addComment($enum.COM_TYPE.REPLY_COM.value,comment.id,comment.id,comment.fromMemberId)">
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>

              <!--  回复列表-->
              <div class="comment-item-box" v-for="(reply,index) in comment.reply" v-bind:key="index">

                <img class="picImg" :src="reply.fromAvatar">
                <div class="reply-box">
                  <div class="new-info-box">
                    <!--回复昵称-->
                    <div class="comment-top">
                      <span class="fsize12 c-grey comment-nickname">
                        <span v-if="reply.toMemberId!=='0'">
                          <span
                            :class="{'is-current-user':reply.fromMemberId===loginInfo.id}">{{reply.fromNickname}}</span>

                        </span>
                        <span v-else :class="{'is-current-user':reply.fromMemberId===loginInfo.id}">{{reply.fromNickname}}</span>
                      </span>
                    </div>
                    <!--回复内容-->
                    <div class="noter-txt " style="margin: 5px 0 12px 0">
                      <p> <span v-if="reply.type===$enum.COM_TYPE.REPLY_REPLY.value" class="reply-sub" style="color: #2075e0;">
                            <span  style="color: #909399">回复 </span>@{{reply.toNickname}} :</span>
                        {{reply.content}}</p>
                    </div>
                    <!--  回复时间-->
                    <div class="of">
                      <span class="fl"><font class="fsize12 c-999 ">{{reply.gmtCreate | timeDiff}}</font></span>
                      <span class="fl" @click="doReply(reply.id)"><a class="fsize12 c-999 ml15">{{showItemId===reply.id?'取消回复':'回复'}}</a></span>
                      <!--删除评论-->
                      <span class="fr">
                  <font class="fsize12 c-999 ml15">
                    <el-dropdown @command="delComment">
                      <i class="el-icon-more"></i>
                       <el-dropdown-menu slot="dropdown">
                         <el-dropdown-item v-if="reply.fromMemberId===loginInfo.id"
                                           :command="reply.id">删除评论</el-dropdown-item>
                         <div v-else>
                            <el-dropdown-item>举报</el-dropdown-item>
                            <el-dropdown-item>加入黑名单</el-dropdown-item>
                         </div>
                       </el-dropdown-menu>
                    </el-dropdown>
                      </font>
                </span>
                      <div class="clear"></div>
                      <!--******************回复回复输入******************-->
                      <template v-if="showItemId===reply.id">
                        <div class="comment-reply-form-box">
                          <!--评论框-->
                          <div class="comment-reply-form">
                            <el-input
                              type="textarea"
                              :autosize="{ minRows: 3, maxRows: 5}"
                              :placeholder="'回复@'+reply.fromNickname"
                              v-model="replyReplyContent">
                            </el-input>

                            <div class="comment-operate-box">
                              <div class="comment-operate-l">
                                <span class="tip_comment">还能输入<em>{{1000-replyReplyContent.length}}</em>个字符</span>
                              </div>
                              <div class="comment-operate-c">
                                &nbsp;
                              </div>
                              <div class="comment-operate-r">
                                <input type="button" value="回复" :disabled="replyReplyBtnDis"
                                       class="lh-reply-btn  my-reply-btn "
                                       @click="addComment($enum.COM_TYPE.REPLY_REPLY.value,reply.id,comment.id,reply.fromMemberId)">
                              </div>
                            </div>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </div>
            </li>

          </ul>
        </section>
      </section>

      <!-- 公共分页 开始 -->
      <div class="paging" v-if="dataInfo.total>4">
        <!-- undisable这个class是否存在，取决于数据属性hasPrevious -->
        <a
          :class="{undisable: !dataInfo.hasPrevious}"
          href="#"
          title="首页"
          @click.prevent="gotoPage(1)">首</a>
        <a
          :class="{undisable: !dataInfo.hasPrevious}"
          href="#"
          title="前一页"
          @click.prevent="gotoPage(dataInfo.current-1)">&lt;</a>
        <a
          v-for="page in dataInfo.pages"
          :key="page"
          :class="{current: dataInfo.current == page, undisable: dataInfo.current == page}"
          :title="'第'+page+'页'"
          href="#"
          @click.prevent="gotoPage(page)">{{ page }}</a>
        <a
          :class="{undisable: !dataInfo.hasNext}"
          href="#"
          title="后一页"
          @click.prevent="dataInfo.hasNext?gotoPage(dataInfo.current+1):''">&gt;</a>
        <a
          :class="{undisable: !dataInfo.hasNext}"
          href="#"
          title="末页"
          @click.prevent="gotoPage(dataInfo.pages)">末</a>
        <div class="clear"/>
      </div>
      <!-- 公共分页 结束 -->
    </div>

    <!-- /评论 结束 -->
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'

  import cookie from "js-cookie";
  import comment from '@/api/comment'
  import commonUtil from "@/utils/commonUtil";

  export default {
    //通过 Prop 向子组件传递数据
    props: {
      //表单提交数据
      fromData: {
        type: Object,
        default() {
          return {
            page: 1,
            limit: 4,
            targetType: '',
            targetId: '',
            teacherId: '',
          }
        }
      }
    }, data() {
      return {
        //结果数据
        dataInfo: {},
        showItemId: ''//回复显示id
        , commentBtnDis: true
        , replyCommentBtnDis: true
        , replyReplyBtnDis: true

        , commentContent: ''//评论内容
        , replyCommentContent: ''//回复评论内容
        , replyReplyContent: ''//回复评论回复内容
      }
    },
    filters: {
      timeDiff: function (value) {
        return commonUtil.changeTime(value)
      }
    }, computed: {
      ...mapGetters([
        'loginInfo',
      ])
    },
    watch: {
      //注意 不要用箭头函数来定义watcher函数
      // 计算输入字符长度
      commentContent: function (newV, oldV) {
        this.commentBtnDis = !newV
      },
      replyCommentContent: function (newV, oldV) {
        this.replyCommentBtnDis = !newV
      },
      replyReplyContent: function (newV, oldV) {
        this.replyReplyBtnDis = !newV
      },
    },
    mounted() {
      this.initComment()
    },
    methods: {
      initComment() {
        comment.getPageList(
          this.fromData.page
          , this.fromData.limit
          , this.fromData.targetType
          , this.fromData.targetId).then(response => {
          this.dataInfo = response

        })
      },
      /**
       * 传递评论信息到父组件
       * @replyType 评论组件 1 直接评论 2回复评论 3回复评论里的回复
       * @RootId 根id 直接评论为0
       * @toMemberId 回复的用户id ws会通知用户
       * */
      addComment(replyType, ReplyId, RootId, toMemberId) {
        if (!this.loginInfo.id) {
          return this.$message.warning("您还未登录，请先前往登录")
        }
        this.fromData.type = replyType
        this.fromData.replyId = ReplyId
        //如果是直接评论
        if (replyType === this.$enum.COM_TYPE.COM.value) {
          if (!this.commentContent.trim()) return this.$message.warning("请输入内容！")
          this.fromData.content = this.commentContent
        } else if (replyType === this.$enum.COM_TYPE.REPLY_COM.value) {//如果是回复评论
          if (!this.replyCommentContent.trim()) return this.$message.warning("请输入内容！")
          this.fromData.content = this.replyCommentContent
        } else {
          if (!this.replyReplyContent.trim()) return this.$message.warning("请输入内容！")
          this.fromData.content = this.replyReplyContent
        }
        this.fromData.rootId = RootId
        this.fromData.toMemberId = toMemberId
        //console.log(toMemberId)

        //console.log("评论消息", this.fromData)
        comment.addComment(this.fromData).then(response => {
          //console.log(response)
          if (response) {
            this.$message.success("评论成功")
            this.commentContent = ''
            this.replyCommentContent = ''
            this.replyReplyContent = ''
            this.initComment()
          }
        })

      },
      delComment(id) {
        //console.log(id)
        if (!cookie.get('we_token')) {
          return this.$message.warning("您还未登录，请先前往登录")
        }
        comment.delComment(id).then(response => {
          this.$message.success("删除成功")
          this.initComment()
        })
      },
      gotoPage(page = 1) {
        // this.$emit('goto:page', page)
        this.fromData.page = page
        comment.getPageList(
          this.fromData.page
          , this.fromData.limit
          , this.fromData.targetType
          , this.fromData.targetId).then(response => {
          this.dataInfo = response
        })
      },
      doReply(id) {
        console.log(!this.showItemId)
        this.replyCommentContent = ''
        if (!this.showItemId || this.showItemId !== id) {
          this.showItemId = id
        } else {
          this.showItemId = ''
        }

      }
    }
  }
</script>
<style>
  .reply-sub {
    font-family: PingFang SC, HarmonyOS_Regular, Helvetica Neue, Microsoft YaHei, sans-serif;
  }

  .commentHtml {
    background: #fff;
    padding: 32px;
    border-radius: 4px;
  }

  .comment-nickname {
    font-size: 12px;
    font-weight: bold;
    line-height: 18px;
    padding-bottom: 4px;
    word-wrap: break-word;
    position: relative;
    z-index: 3;
    /*color: #6d757a;*/
  }

  /*回复框*/
  .comment-reply-form-box {
    background: rgba(245, 246, 247, 0.8);
    border-radius: 8px;
    padding: 8px 0;
  }

  .el-textarea textarea {
    display: block;
    width: 100%;
    background: rgba(248, 249, 251, 0.8);
    border: none;
    padding: 4px 12px;
    border-radius: 4px 8px 0 8px;
    resize: none;
    height: 30px;
    font-size: 14px;
    line-height: 22px;
    box-sizing: border-box;
    transition: height .3s ease-in-out;
    font-family: "SF Pro Display", Roboto, Noto, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  }

  .comment-operate-box {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 12px 0 12px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    -webkit-transition: display .3s ease-in-out;
    transition: display .3s ease-in-out;
  }

  .my-reply-btn {
    width: 72px;
    height: 32px;
    border-radius: 16px;
  }

  .tip_comment {
    font-size: 12px;
    color: #999aaa;
    line-height: 17px;
  }

  .tip_comment em {
    color: #000;
    font-weight: bold;
  }

  .comment-item-box {
    display: flex;
    margin: 15px 0;

  }

  .comment-item-box img {
    width: 30px;
    height: 30px;
  }

  .reply-box {
    padding: 5px 0 0 15px;
    flex-grow: 1;
  }

  .comment-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    line-height: 20px;
    font-size: 14px;
  }

  .is-current-user {
    /*color: rgb(245, 195, 99);*/
    color: #FB7299;
    /*color: #2075e0;*/
  }

  .c-grey {
    color: #6e6262;
  }

  .picImg {
    border-radius: 50%;
  }
</style>
